<script setup>
import {reactive} from "vue";
import {postRequest} from "@/util/api";
import {message} from "@/util/util";

const props = defineProps({
  initData: Function,
});

const data = reactive({
  visible: false,
  parentDirId: "",
  dirId: "",
  dirName: "",
});

function renameDir() {
  postRequest("/dir/renameDir", null, {
    parentDirId: Number(data.parentDirId),
    dirId: Number(data.dirId),
    newName: data.dirName.trim(),
  }, (res) => {
    message(res.data.msg, "success");
    props.initData();
    data.visible = false;
  });
}

function openDirRenameDialog(rename) {
  data.parentDirId = rename.parentDirId;
  data.dirId = rename.dirId;
  data.dirName = rename.dirName;
  data.visible = true;
}

defineExpose({
  openDirRenameDialog,
});
</script>

<template>
  <el-dialog v-model="data.visible" title="重命名文件夹" width="300">
    <el-input v-model="data.dirName" placeholder="请输入文件夹名称"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.visible = false">取消</el-button>
        <el-button type="primary" @click="renameDir">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>